<ul id="menu" ng-click="vm.moog('asd')" >
	<li data-menuanchor="firstPage"><a>First slide</a></li>
	<li data-menuanchor="secondPage"><a>Second slide</a></li>
	<li data-menuanchor="3rdPage"><a>Third slide</a></li>
	<li data-menuanchor="4thpage"><a>Fourth slide</a></li>
</ul>

<div full-page options="vm.mainOptions">
  <div class="section " id="section0">
		<h1>fullPage.js</h1>
		<p>Create Beautiful Fullscreen Scrolling Websites</p>
		<img src="images/fullPage.png" alt="fullPage" />
	</div>
	<div class="section active" id="section1">
	    <div class="slide">
				<div class="intro">
					<h1>Create Sliders</h1>
					<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
					<img src="images/slider.png" alt="slider" /> <br/>
					<button ng-click="vm.addSlide();">Click Me to Add another Slide!</button>
				</div>
			</div>

    <div ng-repeat="slide in vm.slides" class="slide">
			<div class="intro" ng-click="vm.moog('ddd')" >
				<img ng-src="{{ slide.src }}" alt="simple" />
				<h1>{{ slide.title }}</h1>
				<p>{{ slide.description }}</p>
			</div>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1 ng-click="vm.moog('sss')" >Example</h1>
			<p>HTML markup example to define 4 sections.</p>
			<img src="images/example2.png" alt="example" />
		</div>
	</div>
	<div class="section" id="section3">
		<div class="intro">
			<h1>Working On Tablets</h1>
			<p>
				Designed to fit to different screen sizes as well as tablet and mobile devices.
				<br /><br /><br /><br /><br /><br />
			</p>
		</div>
		<img src="images/tablets.png" alt="tablets" />
	</div>
</div>
